<template>
  <div class="statisticalanalysis">
      <el-button @click="print" class="signs print" v-if="list.shStatus==2">打印</el-button>  
      <el-tooltip class="item" effect="dark" content="审核通过才可以打印" v-else placement="top-start">
        <el-button class="signs print" style="cursor:not-allowed;">打印</el-button>  
      </el-tooltip>
    <div ref="print">
        <el-card class="box-card">
            <div style="width:100%;text-align:center;">
              <span style="height:45px;display:inline-block;line-height:45px;font-weight:700;">断路安全作业证</span>
            </div>
            <table border="1" cellspacing="0">
                <tr align="center" height="35px" >
                  <td colspan="2">申请单位</td>
                  <td colspan="2"><span v-text="list.sqdwmc"></span></td>
                  <td colspan="2">申请人</td>
                  <td colspan="2"><span v-text="list.sqrmc"></span></td>
                  <td colspan="2">作业证编号</td>
                  <td colspan="2"><span v-text="list.zyzbh"></span></td>
                </tr>
                <tr height="35x">
                  <td align="center" colspan="2">涉及相关单位（部门）</td>
                  <td colspan="10" v-text="list.xgdwmc" style="padding-left:2rem;"></td>
                </tr>
                <tr height="35x">
                  <td align="center" colspan="2">断路原因</td>
                  <td colspan="10" v-text="list.dlyy" style="padding-left:2rem;"></td>
                </tr>
                <tr align="left" height="35x">
                  <td align="center" colspan="2">断路时间</td>
                  <td colspan="10" align="center" style="padding-right:4rem;">
                     自<span v-text="list.dlkssj"></span>
                     始<span v-text="list.dljssj"></span>止
                  </td>
                </tr>
                <tr height="80px">
                  <td colspan="12" style="border-bottom:none;padding-left:10px;">
                     断路地段示意图及相关说明：
                     <span v-text="list.xgsm"></span>
                  </td>
                </tr>
                <tr height="40px">
                  <td align="right" colspan="13" style="border-top:none;padding-right:2rem;">
                     <span>签字：</span>
                     <span v-text="list.xgsmqzmc" style="padding-right:1rem;"></span>
                     <span v-text="list.xgsmrq"></span>
                  </td>
                </tr>
                <tr height="120px">
                  <td align="center" colspan="2">危害辨识</td>
                  <td align="left" colspan="10" v-text="list.whbs" style="padding-left:2rem;"></td>
                </tr>
                <tr align="center" height="35px">
                  <td>序号</td>
                  <td colspan="10">安全措施</td>
                  <td colspan="2">确认人</td>
                </tr>
                <tr align="center" height="40px">
                  <td>1</td>
                  <td align="left" class="textleft" colspan="10">作业前，制定交通组织方案（附后），并已通知相关部门或单位</td>
                  <td colspan="2" v-text="list.aqcsqrr"></td>
                </tr>
                <tr align="center" height="40px">
                  <td>2</td>
                  <td align="left" class="textleft" colspan="10">作业前，在断路的路口和相关道路上设置交通警示标志，在作业区附近设置路栏、道路作业警示灯、导向标等交通警示设施</td>
                  <td colspan="2" v-text="list.aqcsqrr"></td>
                </tr>
                <tr align="center" height="40px">
                  <td>3</td>
                  <td align="left" class="textleft" colspan="10">夜间作业应设置警示红灯</td>
                  <td colspan="2" v-text="list.aqcsqrr"></td>
                </tr>
                <tr align="center" height="40px">
                  <td rowspan="2">4</td>
                  <td align="left" class="textleft" colspan="10" style="border-bottom:none;">
                    其他安全措施：
                    <span v-text="list.qtaqcs"></span>
                  </td>
                  <td rowspan="2" colspan="2" v-text="list.aqcsqrr"></td>
                </tr>
                <tr align="center" height="40px">
                  <td colspan="10" style="border-top:none;">
                    编制人：<span v-text="list.qtaqcsbzrmc"></span>
                  </td>
                </tr>
                <tr height="80px">
                  <td colspan="12" style="border-bottom:none;padding-left:10px;">
                     申请单位意见：
                     <span v-text="list.sqdwyj"></span>
                  </td>
                </tr>
                <tr height="40px">
                  <td align="right" colspan="12" style="border-top:none;padding-right:2rem;">
                     签字：
                     <span v-text="list.sqdwqzmc" style="padding-right:2rem;"></span>
                     <span v-text="list.sqdwyjrq"></span>
                  </td>
                </tr>
                <tr height="80px">
                  <td colspan="12" style="border-bottom:none;padding-left:10px;">
                     作业单位意见：
                     <span v-text="list.zydwyj"></span>
                  </td>
                </tr>
                <tr height="40px">
                  <td align="right" colspan="12" style="border-top:none;padding-right:2rem;">
                     签字：
                     <span v-text="list.zydwqzmc" style="padding-right:2rem;"></span>
                     <span v-text="list.zydwrq"></span>
                  </td>
                </tr>
                <tr height="80px">
                  <td colspan="12" style="border-bottom:none;padding-left:1rem;">
                     审批部门意见：
                     <span v-text="list.spbmyj"></span>
                  </td>
                </tr>
                <tr height="40px">
                  <td align="right" colspan="12" style="border-top:none;padding-right:2rem;">
                     签字：
                     <span v-text="list.spbmqzmc" style="padding-right:2rem;"></span>
                     <span v-text="list.spbmrq"></span>
                  </td>
                </tr>
                <tr height="80px">
                  <td colspan="12" style="border-bottom:none;padding-left:1rem;">
                     完工验收：
                     <span v-text="list.wgysyj"></span>
                  </td>
                </tr>
                <tr height="40px">
                  <td align="right" colspan="12" style="border-top:none;padding-right:2rem;">
                     签字：
                     <span v-text="list.wgysqzmc" style="padding-right:2rem;"></span>
                     <span v-text="list.wgysrq"></span>
                  </td>
                </tr>
            </table>
        </el-card>
    </div>
    
  </div>
</template>

<script>
import Vue from 'vue'
import vueEsign from 'vue-esign'
import printStyle from './printStyle'
export default {
  props: ["list"],
  name: 'dlaq',
  components: {
    vueEsign
  },
  created(){
    this.list.dlkssj = this.formatDateH(this.list.dlkssj);
    this.list.dljssj = this.formatDateH(this.list.dljssj);
    this.list.xgsmrq = this.formatDateH(this.list.xgsmrq);
    this.list.sqdwyjrq = this.formatDateH(this.list.sqdwyjrq);
    this.list.zydwrq = this.formatDateH(this.list.zydwrq);
    this.list.spbmrq = this.formatDateH(this.list.spbmrq);
    this.list.wgysrq = this.formatDateH(this.list.wgysrq);
  },
  methods: {
    formatDate(needTime){
      //needTime是整数，否则要parseInt转换
        if(needTime !== null && needTime !== undefined){
          var time = new Date(needTime);
          var y = time.getFullYear();
          var m = time.getMonth()+1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          // var s = time.getSeconds();
          return y+'年'+this.add0(m)+'月'+this.add0(d)+'日';
        }else{
          return '  年  月  日';
        }
    },
    formatDateH(needTime){
      //needTime是整数，否则要parseInt转换
        if(needTime !== null && needTime !== undefined){
          var time = new Date(needTime);
          var y = time.getFullYear();
          var m = time.getMonth()+1;
          var d = time.getDate();
          var h = time.getHours();
          var mm = time.getMinutes();
          // var s = time.getSeconds();
          return y+'年'+this.add0(m)+'月'+this.add0(d)+'日'+this.add0(h)+'时'+this.add0(mm)+'分';
        }else{
          return '  年  月  日  时  分';
        }
    },
    add0(m){
      return m<10 ?'0'+m :m 
    },
    print() {
      let print = this.$refs.print.innerHTML
      let printPart = print + printStyle;
      let newTab = window.open('_blank');
      newTab.document.body.innerHTML = printPart;
      newTab.print();
      newTab.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.statisticalanalysis {
   .signs {
        position: absolute;
        right: 10px;
        top: 70px;
        &.print {
            top: 20px;
            right:50px;
        }
   }
  .box-card {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    color: #606266;
    position: relative;
    table {
      margin: 0 auto;
      tr {
        .textleft {
          text-align:left;
          padding-left: 20px;
        }
        span{
          display:inline-block;
          min-width:70px;
        }
      }
      .positon {
        display: block;
        margin-top: -25px;
        margin-top: 35px;
      }
    }
  }
}
</style>